<li class="nav-item dropdown category-dropdown">
  <a class="nav-link fw-bold dropdown-toggle" href="#">
    {{__('ProductCategory::common.all_categories_menu_title')}}
  </a>
  <div class="dropdown-menu category-menu" style="overflow-y: visible;">
    <div class="card card-lg">
      <div class="card-body" id="categories_menu_body">
        <div class="categories-wrapper">
          <ul class="category-list">
            @foreach ($categories_menus as $item)
              <li class="category-item" data-category="{{$item['id']}}">
                <a href="{{$item['go_url']}}" class="category-link">
                  <span>{{$item['description']['name']}}</span>
                  @if (isset($item['children']) && !empty($item['children']))
                    <i class="category-arrow">›</i>
                  @endif
                </a>
                @if (isset($item['children']) && !empty($item['children']))
                  <div class="subcategory-panel" id="subcategory_panel_{{$item['id']}}">
                    <div class="subcategory-grid">
                      @foreach ($item['children'] as $children)
                        <div class="subcategory-column">
                          <a class="subcategory-title" href="{{$children['go_url']}}">
                            {{$children['description']['name']}}
                          </a>
                          @if (isset($children['children']) && !empty($children['children']))
                            <div class="subcategory-items">
                              @foreach ($children['children'] as $children2)
                                <a class="subcategory-item" href="{{$children2['go_url']}}">
                                  {{$children2['description']['name']}}
                                </a>
                              @endforeach
                            </div>
                          @endif
                        </div>
                      @endforeach
                    </div>
                  </div>
                @endif
              </li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>
  </div>
</li>

<style>
  /* 重置样式 */
  .category-dropdown {
    position: relative;
  }

  .category-dropdown .card {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: none;
  }

  /* 主分类样式 */
  .category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 240px;
  }

  .category-item {
    position: relative;
    transition: all 0.2s ease;
  }

  .category-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.2s ease;
  }

  .category-arrow {
    font-size: 16px;
    transition: transform 0.2s ease;
  }

  /* 鼠标悬停效果 */
  .category-item:hover .category-link {
    background-color: #f5f5f5;
    color: #2c6ecb;
  }

  .category-item:hover .category-arrow {
    transform: translateX(3px);
    color: #2c6ecb;
  }

  .category-item.active .category-link {
    background-color: #f5f5f5;
    color: #2c6ecb;
  }

  /* 子分类面板 */
  .subcategory-panel {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 700px;
    background-color: white;
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 5;
    transition: all 0.3s ease;
  }

  .category-item:hover .subcategory-panel {
    display: block;
  }

  /* 子分类网格布局 */
  .subcategory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }

  .subcategory-column {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
  }

  .subcategory-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    font-size: 15px;
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
  }

  .subcategory-title:hover {
    color: #2c6ecb;
  }

  .subcategory-items {
    display: flex;
    flex-direction: column;
  }

  .subcategory-item {
    color: #666;
    text-decoration: none;
    margin: 5px 0;
    font-size: 13px;
    transition: all 0.2s ease;
  }

  .subcategory-item:hover {
    color: #2c6ecb;
    transform: translateX(3px);
  }

  /* 响应式样式 */
  @media (max-width: 992px) {
    .subcategory-panel {
      width: 550px;
    }

    .subcategory-grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
  }
  
  @media (max-width: 768px) {
    .subcategory-panel {
      position: static;
      width: 100%;
      box-shadow: none;
      padding: 10px 0 0 15px;
    }
    
    .category-list {
      width: 100%;
    }
    
    .subcategory-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
</style>

<script>
$(function() {
  // 初始化分类菜单交互
  initCategoryMenu();
  
  function initCategoryMenu() {
    // 触摸设备优化
    if ('ontouchstart' in window) {
      $('.category-item').on('click', function(e) {
        if ($(this).find('.subcategory-panel').length) {
          e.preventDefault();
          $(this).toggleClass('active');
        }
      });
    } else {
      // 桌面设备优化 - 鼠标移入移出事件
      $('.category-item').on('mouseenter', function() {
        const categoryId = $(this).data('category');
        $(this).addClass('active');
        $(`#subcategory_panel_${categoryId}`).css('display', 'block');
      }).on('mouseleave', function() {
        $(this).removeClass('active');
        $(this).find('.subcategory-panel').css('display', 'none');
      });
    }
    
    // 窗口调整大小时重新计算位置
    $(window).on('resize', debounce(function() {
      adjustCategoryLayout();
    }, 200));
    
    // 初始调整布局
    adjustCategoryLayout();
  }
  
  function adjustCategoryLayout() {
    // 响应式调整子菜单位置
    const windowWidth = $(window).width();
    if (windowWidth <= 768) {
      $('.subcategory-panel').css({
        'position': 'static',
        'box-shadow': 'none',
        'width': '100%'
      });
    } else {
      $('.subcategory-panel').css({
        'position': 'absolute',
        'box-shadow': '2px 0 10px rgba(0, 0, 0, 0.1)',
        'width': windowWidth <= 992 ? '550px' : '700px'
      });
    }
  }
  
  // 函数节流，避免频繁触发resize事件
  function debounce(func, wait) {
    let timeout;
    return function() {
      const context = this;
      const args = arguments;
      clearTimeout(timeout);
      timeout = setTimeout(function() {
        func.apply(context, args);
      }, wait);
    };
  }
});
</script>

